<!-- 搜索商品 -->
<template>

  <div class="goods-content">
    <p class="title">为您推荐以下相关的旅游套餐：</p>
    <!-- 旅游套餐列表 -->
     <div class="goods-list">
        <!-- 单个商品 -->
         <div class="goods-item">
            <img src="../../assets/gu.jpg" alt="">
            <p class="goods-title text-show ">2025厦门，鹭岛漫游×山海文艺：厦门五天四夜全攻略</p>
            <p class="goods-price">￥1233.3</p>
         </div>
         <div class="goods-item">
            <img src="../../assets/gu.jpg" alt="">
            <p class="goods-title text-show ">2025厦门，鹭岛漫游×山海文艺：厦门五天四夜全攻略</p>
            <p class="goods-price">￥1233.3</p>
         </div>

         <div class="goods-item">
            <img src="../../assets/gu.jpg" alt="">
            <p class="goods-title text-show ">2025厦门，鹭岛漫游×山海文艺：厦门五天四夜全攻略</p>
            <p class="goods-price">￥1233.3</p>
         </div>

          
        
     </div>

  </div>
</template>

<script setup lang="ts">

</script>

<style lang="less" scoped>
.goods-content{
    padding-top: 2px;
    padding-bottom: 2px;
    background: white;
    border-radius: 5px;
    .title{
        color:rgb(216, 166, 245);
        font-weight: bold;
        margin-top: 4px;
        margin-left: 4px;
    }
    .goods-list{
        display: flex;
        // x轴溢出
        
       overflow-x: auto;
       margin: 5px 0px;

        .goods-item{
          
            padding:6px;
            background: #f3f3f3;
            border-radius: 4px;
            display: flex;
            // 垂直布局
            flex-direction: column;
            margin: 0 4px;
            width: 33%;
            flex-shrink: 0;
            img{
                width:100%;
                border-radius: 4px;
                height: 130px;
                object-fit: cover;
                margin-bottom: 4px;
            }
            .goods-title{
                font-size: 16px;

                font-weight: bold;
                margin-bottom: 4px;
            }
            .goods-price{
                margin-top:auto;
                font-size: 14px;
                color: red;
            }
        }
    }
}

</style>